<template>
  <view class="app-content">
    <!-- 导航栏 -->
    <uni-nav-bar ref="navBar" status-bar="true" left-icon="back" background-color="#253155" color="white" :shadow="false" title="登录" @clickLeft="uni.navigateBack()" />

    <!-- 登录第一步 -->
    <view v-if="step === 1">
      <button class="login btn" @click="step = 2">
        手机号登录
      </button>
      <!-- #ifdef MP-WEIXIN -->
      <!-- 这个写着太麻烦了，先不做了 -->
      <!-- <button class="login-fast btn" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">
        微信快速登录(推荐)
      </button> -->
      <!-- #endif -->
    </view>

    <!-- 手机号登录 -->
    <view v-else-if="step === 2">
      <input v-model="phone" placeholder="请输入手机号" class="phone">
      <view class="verify-group">
        <input v-model="verify" placeholder="请输入验证码" class="verify">
        <view class="obtain-verify" @click="sendVerifyCode">
          {{ verifyText }}
        </view>
      </view>
      <view class="login-btn" @click="doLogin">
        登录
      </view>
      <view class="protocol">
        <checkbox class="protocol-check" />
        <view class="protocol-text">
          同意用户服务协议
        </view>
      </view>
    </view>

    <!-- #ifdef MP-WEIXIN -->
    <view v-else-if="step === 3">
      <button class="sync-wx profile-btn" open-type="getUserInfo" @getuserinfo="getUserInfo">
        同步微信昵称头像
      </button>
      <button class="sync-self profile-btn" @click="navBack">
        我自己填写昵称
      </button>
    </view>
    <!-- #endif -->
  </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      uni,
      step: 2,
      phone: '',
      verify: '',
      verifyText: '获取验证码',
      verifyTime: 0
    }
  },
  onLoad() {

  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    // ...mapMutations(['login']),
    // 发送验证码
    sendVerifyCode() {
      if (this.verifyTime > 0) {
        return
      }
      const that = this
      if (this.phone && this.phone.length === 11) {
        that.$api.request('user', 'sendVerifyCode', {
          phone: this.phone
        }).then(res => {
          this.verifyTime = 60
          this.verifyInterval(60)
        })
      } else {
        this.$api.msg('请输入正确验证码!')
      }
    },
    // 验证码倒计时
    verifyInterval(seconds) {
      if (this.verifyTime === seconds) {
        this.verifyText = seconds + '秒后重试'
      }
      if (this.verifyTime > 0) {
        setTimeout(() => {
          this.verifyText = this.verifyTime + '秒后重试'
          this.verifyTime = this.verifyTime - 1
          this.verifyInterval(seconds)
        }, 1000)
      } else {
        this.verifyTime = 0
        this.verifyText = '重新获取'
      }
    },
    // 执行登录
    doLogin() {
      const that = this
      if (that.phone && that.phone.length === 11 && that.verify) {
        uni.showLoading({
          title: '正在登录.'
        })
        that.$api.request('user', 'fastLogin', {
          phone: that.phone,
          verifyCode: that.verify
        }, failres => {
          uni.hideLoading()
          that.$api.msg(failres.errmsg)
        }).then(res => {
          uni.hideLoading()
          // 登录成功！
          const user = res.data
          that.$store.commit('login', user)
          console.log(user)
          // #ifdef MP-WEIXIN
          if (!user.nickname && !user.avatarUrl) {
            // TODO 若是微信平台，则尝试让用户同步自己的微信头像
            that.step = 3
          } else {
            that.navBack()
          }
          // #endif
          // #ifndef MP-WEIXIN
          that.navBack()
          // #endif
        })
      } else {
        that.$api.msg('请完善手机号与验证码')
      }
    },
    // #ifdef MP-WEIXIN
    getUserInfo(e) {
      const that = this
      // 获取用户信息回调
      uni.showLoading('正在同步')
      if (e.detail && e.detail.userInfo && e.detail.userInfo.nickName) {
        // 构建请求表单
        that.$api.request('user', 'syncUserInfo', {
          nickname: e.detail.userInfo.nickName,
          avatarUrl: e.detail.userInfo.avatarUrl,
          gender: e.detail.userInfo.gender
        }).then(res => {
          // 重新提交store
          const newUserInfo = Object.assign({}, this.userInfo)
          newUserInfo.nickname = e.detail.userInfo.nickName
          newUserInfo.avatarUrl = e.detail.userInfo.avatarUrl
          newUserInfo.gender = e.detail.userInfo.gender
          that.$store.commit('login', newUserInfo)
          that.navBack()
        })
      }
    },
    // #endif
    navBack() {
      this.previousPageReload()
      uni.navigateBack()
    },
    previousPageReload() {
      // 前页重新加载
      if (this.$api.prePage() && this.$api.prePage().loadData) {
        this.$api.prePage().loadData()
      }
    }
  }
}
</script>

<style>
  .login {
    margin: 50% auto 0;
  }

  .login-fast {
    margin: 10% auto 0;
  }

  .login-fast::after {
    border: none;
  }

  .btn {
    width: 80%;
    border-radius: 70rpx;
    color: white;
    background: RGBA(0,0,0,0.2);
    border: 1px solid #BBB;
    font-size: 28rpx;
  }

  input {
    height: 80rpx;
    background: RGBA(0,0,0,0.2);
    border-radius: 80rpx;
    border: 1px solid #BBB;
    color: white;
    text-align: center;
  }

  .phone {
    width: 85%;
    margin: 40% auto 0;
  }

  .verify-group {
    margin: 8% auto 0;
    display: flex;
    width: 85%;
  }

  .verify {
    flex: 3;
  }

  .obtain-verify {
    height: 80rpx;
    background: RGBA(0,0,0,0.2);
    border-radius: 80rpx;
    border: 1px solid #BBB;
    color: white;
    text-align: center;
    flex: 2;
    margin-left: 10rpx;
    line-height: 80rpx;
  }

  .protocol {
    position: fixed;
    display: flex;
    bottom: 120rpx;
    left: 30%;
  }

  .protocol-check {
    font-size: 20rpx;
  }

  .protocol-text {
    font-size: 26rpx;
    flex: 1;
    color: white;
  }

  .login-btn {
    margin: 25% auto 0;
    width: 80%;
    height: 80rpx;
    background: RGBA(0,0,0,0.2);
    border-radius: 80rpx;
    border: 1px solid #BBB;
    color: white;
    text-align: center;
    line-height: 80rpx;
  }

  .sync-wx {
    margin: 45% auto 0;
  }

  .sync-self {
    margin: 10% auto 0;
  }

  .profile-btn {
    width: 80%;
    background: RGBA(0,0,0,0.2);
    border-radius: 80rpx;
    color: white;
    font-size: 28rpx;
    border: 1px solid #BBB;
  }

  .profile-btn::after {
    border: none;
  }

</style>
